<template>
  <div>
    <el-image src="	https://22159555.s21i.faiusr.com/4/ABUIABAEGAAg8-_H8wUolJnQYDCADzisAg.png.webp" />
    <h1>产品中心</h1>
    <div id="hr"></div>

    <div id="solution-body">
      <el-row style="margin-left: 75px; margin-bottom: 15px;">
        <el-col :span=6.5 v-for="(data, index) in arrData" :key="data.id" :offset="index > 0 ? 1 : 0">
          <el-card :body-style="{ padding: '0px' }"
                   shadow="hover"
                   style="border-radius: 0; border: 0;">
            <router-link :to=data.path> <!-- 添加这行点击图片跳转路由 -->
            <img width="300px" height="232px" :src='data.url' />
            </router-link> <!-- 添加这行 -->
            <div style="padding: 5px;">
              <span>{{data.title}}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row style="margin-left: 75px; margin-bottom: 15px">
        <el-col :span=6.5 v-for="(data, index) in arrData2" :key="data.id"  :offset="index > 0 ? 1 : 0">
          <el-card :body-style="{ padding: '0px'}"
                   shadow="hover"
                   style="border-radius: 0; border: 0;">
            <router-link :to=data.path> <!-- 添加这行点击图片跳转路由 -->
            <img width="300px" height="232px" :src="data.url"/>
            </router-link>
            <div style="padding: 5px;">
              <span>{{data.title}}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row style="margin-left: 75px">
        <el-col :span="6.5" v-for="(data, index) in arrData3" :key="data.id" :offset="index > 0 ? 1 : 0">
          <el-card :body-style="{ padding: '0px' }"
                   shadow="never"
                   style="border-radius: 0; border: 0 solid #EBEEF5;">
            <router-link :to=data.path> <!-- 添加这行点击图片跳转路由 -->
            <img width="300px" height="232px" :src="data.url"/>
            </router-link>
            <div style="padding: 5px;">
              <span>{{data.title}}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-pagination
        style="margin-bottom: 50px"
        background
        layout="prev, pager, next"
        :total=5>
    </el-pagination>

  </div>
</template>
<script>
export default {
  name: "SolutionView",
  data(){
    return {
      arrData:[
        {
          path: '/product/solution/medication',
          url:'https://1.s140i.faiscm.com/2/AIwBCAAQAhgAINSr6dcFKMzCr_0CMIAPOK0J!400x400.jpg',
          title:'云时空医药管理软件'
        },
        {
          path: '/product/solution/warehouse',
          url:'https://1.s140i.faiscm.com/2/AIwBCAAQAhgAIJj_7NUFKLXAgbsFMIAPOIAK!400x400.jpg',
          title:'智慧仓储管理系统'
        },
        {
          path: '',
          url:'https://22159555.s21i.faiusr.com/4/ABUIABAEGAAg-Inz8gUo8fzq-wUwrAI48gE.png.webp',
          title:'收支管理系统'
        },
      ],
      arrData2:[
        {
          path:'/product/solution/marketing',
          url:'https://1.s140i.faiscm.com/2/AIwBCAAQAhgAIJr17NUFKOSN9OQDMIAPOIEK!400x400.jpg',
          title:'营销管理工具'
        },
        {
          path:'/product/solution/OAOnline',
          url:'https://1.s140i.faiscm.com/2/AIwBCAAQAhgAIPqzi9cFKO3C66IHMIAPOIAK!400x400.jpg',
          title:'OA线上办公系统'
        },
        {
          path:'/product/solution/promotion',
          url:'https://1.s140i.faiscm.com/2/AIwBCAAQAhgAIKWbi9cFKNzRn2owgA84gAo!400x400.jpg',
          title:'企业推广宣传工具'
        },
      ],
      arrData3:[
        {
          path:'',
          url:'https://1.s140i.faiscm.com/2/AIwBCAAQAhgAIMur7tcFKICpzsECMIAPOIAK!400x400.jpg',
          title:'财务管理系统'},
        {
          path:'',
          url:'https://1.s140i.faiscm.com/2/AIwBCAAQAhgAINSr6dcFKOLRlQUwgA84gAo!400x400.jpg',
          title:'需求定制开发'},
      ]
    }
  },



}
</script>

<style scoped>
.el-card:hover {
  transform: scale(1.1);
  box-shadow: 0 0 8px #aaa;
}

span {
  font-size: 14px;
  color: #666666;
}
#solution-body {
  margin: 25px auto;
  width: 1140px;
  height: 853px;
}
h1{
  margin-top: 60px;
  margin-bottom: 15px;
  font-size: 20px;
  color: #0e05c1;
}
#hr{
  margin: 0 auto;
  width: 120px;
  border: 1px solid #0e05c1;
}

</style>